<template>
  <div class="tp">
    <Header />

    <Content>
      <div class="cp">
        <div class="card">
          <BasicTable @register="registerTable" :resizeHeightOffset="44">
            <template #form-advanceBefore>
              <a-button danger @click="onAdd">新增房间</a-button>
            </template>

            <template #action="{ record }">
              <TableAction
                :divider="true"
                :actions="[
                  {
                    color: 'success',
                    label: '修改',
                    onClick: () => onEdit(record),
                  },
                  {
                    popConfirm: {
                      title: '您确定要删除吗',
                      confirm: () => onDelete(record),
                    },
                    color: 'success',
                    label: '删除',
                  },
                ]"
              />
            </template>
          </BasicTable>
        </div>
      </div>
    </Content>

    <Detail @register="registerDetail" @complete="reload" />
  </div>
</template>

<script setup>
  import { defineOptions } from 'vue';

  import { useDrawer } from '@/components/Drawer';

  import { BasicTable, TableAction, useTable } from '@/components/Table';

  import Detail from './detail.vue';
  import Header from '@/widget/header.vue';
  import Content from '@/widget/content.vue';
  import { PAGE, PUT } from '@/api/http.js';
  import { getLabel, roomPeople, roomStatus } from '@/api/ds';
  import { useMessage } from '@/hooks/web/useMessage';

  defineOptions({ name: 'Room' });

  const [registerDetail, { openDrawer }] = useDrawer();

  const { createMessage } = useMessage();

  const [registerTable, { reload }] = useTable({
    api: PAGE('/shop/getStoreRoomInfoByPages'),
    formConfig: {
      baseColProps: { style: { paddingRight: '12px' } },
      actionColOptions: { span: 14 },
      schemas: [
        {
          field: 'roomName',
          component: 'Input',
          componentProps: {
            placeholder: '请输入房间名称搜索',
          },
          colProps: { span: 5 },
        },
        {
          field: 'status',
          component: 'Select',
          componentProps: {
            placeholder: '房间状态',
            options: roomStatus,
          },
          colProps: { span: 5 },
        },
      ],
    },
    columns: [
      {
        title: '房间名称',
        dataIndex: 'roomName',
        ellipsis: false,
      },

      {
        title: '房间类型',
        dataIndex: 'roomType',
        ellipsis: false,
        customRender: ({ value }) => getLabel(roomPeople, value),
      },
      {
        title: '房间状态',
        dataIndex: 'status',
        ellipsis: false,
        customRender: ({ value }) => getLabel(roomStatus, value),
      },
    ],
    useSearchForm: true,
    showTableSetting: false,
    bordered: true,
    showIndexColumn: false,
    rowKey: 'id',
    actionColumn: {
      title: '操作',
      align: 'center',
      width: 160,
      dataIndex: 'action',
      fixed: 'right',
      slots: { customRender: 'action' },
    },
  });

  function onAdd() {
    openDrawer(true, { behavior: 'add' });
  }

  function onEdit({ roomCode }) {
    openDrawer(true, { behavior: 'edit', roomCode });
  }

  async function onDelete({ roomCode }) {
    await PUT('/shop/updateStoreRoomBeanFunction', { roomCode });

    createMessage.success('房间已删除');
    await reload();
  }
</script>
<style lang="less" scoped>
  .card {
    padding: 12px;
  }
</style>
